body{padding-top:0;}

.title{text-align:center;}
.title b{font-size:38px; font-weight:normal; display:block;}
.title p{font-size:20px; font-weight:500; display:inline-block; color:rgb(157,81,184);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image:-webkit-linear-gradient(left, rgb(17,121,215), rgb(157,81,184));}
.more.center{text-align:center;}
.more a{display:inline-block; border:1px solid rgb(17,121,215); color:rgb(17,121,215); font-size:16px; line-height:48px; padding:0 38px; border-radius:38px;}
.more a:hover{background:rgb(17,121,215); color:#fff;}
.more a b{font-weight:normal; transition:.2s; display:inline-block;}
.more a i{margin-left:4px; transition:.2s;}
.more a:hover b{transform:translateX(-4px);}
.more a:hover i{transform:translateX(2px);}
@media(max-width:1199px){
.title b{font-size:28px;}
.title p{font-size:16px;}
.more a{font-size:15px; line-height:38px; padding:0 32px;}
}
@media(max-width:767px){
.title b{font-size:22px;}
.title p{font-size:14px;}
.more a{font-size:14px; line-height:32px; padding:0 28px;}
}

.garden{padding:58px 0; background-size:cover; background-position:center; background-color:rgb(255,255,255); background-image:url('');}
.garden .title{text-align:left;}
.garden .left{width:60%; float:left; padding-right:28px;}
.garden .left aside{margin-top:38px; font-size:18px;}
.garden .left aside p{margin-top:18px;}
.garden .left .count{}
.garden .left .count:after{display:block; content:''; clear:both;}
.garden .left .count dl{float:left; width:25%; margin-top:38px; color:rgb(17,121,215);}
.garden .left .count dl>dt{font-size:18px; color:rgb(17,121,215)}
.garden .left .count dl>dd{line-height:1; margin-top:4px;}
.garden .left .count dl>dd>b{font-size:38px; display:inline-block; margin-right:4px; color:rgb(51,51,51)}
.garden .left .count dl>dd>u{font-size:22px; display:inline-block; text-decoration:none; color:rgb(129,129,129)}
.garden .left .more{margin-top:48px;}
.garden .right{width:40%; float:right; padding-left:28px;}
.garden .right img,
.garden .right video{width:100%; border-radius:3px;}
.garden .right video{background:;}
@media(max-width:1199px){
.garden{padding:38px 0;}
.garden .left{padding-right:8px;}
.garden .left aside{margin-top:28px; font-size:16px;}
.garden .left .count dl{margin-top:28px;}
.garden .left .count dl>dt{font-size:16px;}
.garden .left .count dl>dd>b{font-size:28px;}
.garden .left .count dl>dd>u{font-size:18px;}
.garden .left .more{margin-top:38px;}
.garden .right{padding-left:8px;}
}
@media(min-width:992px){
.garden .right video{height:550px;}
}
@media(max-width:991px){
.garden .left{width:100%; float:none; padding-right:0;}
.garden .left .more{margin-bottom:38px;}
.garden .right{width:100%; float:none; padding-left:0;}
}
@media(max-width:767px){
.garden{padding:18px 0;}
.garden .left aside{margin-top:18px; font-size:14px;}
.garden .left aside p{margin-top:8px;}
.garden .left .count dl{width:50%; margin-top:18px;}
.garden .left .count dl>dt{font-size:14px;}
.garden .left .count dl>dd>b{font-size:22px;}
.garden .left .count dl>dd>u{font-size:15px;}
.garden .left .more{margin:18px 0;}
}

.service{padding:58px 0; background:rgb(247,247,247);}
.service .title + .list{padding-top:38px;}
.service .list>ul{margin:0 -28px; text-align:center;}
.service .list>ul:after{display:block; content:''; clear:both;}
.service .list>ul>li{float:left; width:33.333%; padding:28px;}
.service .list>ul>li>a{display:block; background:#888; position:relative; overflow:hidden; color:rgb(33,33,33); text-align:center; overflow:hidden; border-radius:3px;}
.service .list>ul>li>a>img{display:block; width:100%;}
.service .list>ul>li>a>u{position:absolute; padding:18px; top:0; left:0; right:0; bottom:0; z-index:2;
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-o-box; display:box;
-webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -o-box-pack:center; box-pack:center; 
-webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -o-box-align:center; box-align:center;}
.service .list>ul>li>a>u>img{display:block;}
.service .list>ul>li>a:hover>u>img{}
.service .list>ul>li>a>h3{position:absolute; top:38px; left:0; right:0; z-index:8; font-size:28px; transition:.3s; color:rgba(0,0,0,0.78);}
.service .list>ul>li>a:hover>h3{color:rgb(255,255,255);}
.service .list>ul>li>a>div{position:absolute; left:0; top:0; right:0; bottom:0; z-index:3; visibility:hidden; opacity:0; background:rgba(0,0,0,0.68); transition:.3s; 
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-o-box; display:box;
-webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -o-box-pack:center; box-pack:center; 
-webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -o-box-align:center; box-align:center;}
.service .list>ul>li>a>div>p{color:rgb(255,255,255); font-size:18px;}
.service .list>ul>li>a:hover{box-shadow:0 0 8px rgba(0,0,0,.28); transform:translateY(-8px);}
.service .list>ul>li>a:hover>div{visibility:visible; opacity:1;}
.service .list>ul>li>a>span{position:absolute; left:0; right:0; bottom:38px; z-index:9; visibility:hidden; opacity:0; transition:.3s;}
.service .list>ul>li>a:hover>span{visibility:visible; opacity:1;}
.service .list>ul>li>a>span>ins{display:inline-block; border:1px solid rgb(255,255,255); color:rgb(255,255,255); font-size:16px; line-height:48px; padding:0 38px; border-radius:38px; transition:.3s;}
.service .list>ul>li>a>span>ins b{font-weight:normal; transition:.2s; display:inline-block;}
.service .list>ul>li>a>span>ins i{margin-left:4px; transition:.2s;}
.service .list>ul>li>a>span>ins:hover{background:rgb(17,121,215); border-color:rgb(17,121,215); color:rgb(255,255,255);}
.service .list>ul>li>a>span>ins:hover b{transform:translateX(-4px);}
.service .list>ul>li>a>span>ins:hover i{transform:translateX(2px);}
@media(max-width:1199px){
.service{padding:38px 0;}
.service .title + .list{padding-top:28px;}
.service .list>ul{margin:0 -8px;}
.service .list>ul>li{padding:8px;}
.service .list>ul>li>a:hover{box-shadow:0 0 6px rgba(0,0,0,.28); transform:translateY(-6px);}
.service .list>ul>li>a>div>p{font-size:16px;}
.service .list>ul>li>a>h3{top:28px; font-size:22px;}
.service .list>ul>li>a>span{bottom:28px;}
.service .list>ul>li>a>span>ins{line-height:38px; padding:0 32px; font-size:15px;}
} 
@media(max-width:767px){
.service{padding:18px 0;}
.service .title + .list{padding-top:14px;}
.service .list>ul{margin:0;}
.service .list>ul>li{padding:4px 0; width:100%;}
.service .list>ul>li>a>img{width:50%; float:left;}
.service .list>ul>li>a:hover{box-shadow:0 0 4px rgba(0,0,0,.28); transform:translateY(-4px);}
.service .list>ul>li>a>div{left:50%; visibility:visible; opacity:1;}
.service .list>ul>li>a>div>p{font-size:14px;}
.service .list>ul>li>a>u{right:50%;}
.service .list>ul>li>a>h3{top:18px; font-size:18px; left:50%; color:rgb(255,255,255);}
.service .list>ul>li>a>span{bottom:18px; left:50%; visibility:visible; opacity:1;}
.service .list>ul>li>a>span>ins{line-height:28px; padding:0 18px; font-size:14px;}
.service .list>ul>li:nth-child(2n)>a>img{float:right;}
.service .list>ul>li:nth-child(2n)>a>div{right:50%; left:0;}
.service .list>ul>li:nth-child(2n)>a>u{left:50%; right:0;}
.service .list>ul>li:nth-child(2n)>a>h3{left:0; right:50%;}
.service .list>ul>li:nth-child(2n)>a>span{left:0; right:50%;}
}

.solution{padding:58px 0; position:relative; background-position:center; background-size:cover; background-color:rgb(51,51,51); background-image:url('../../upload/photo/202205/241537522.jpg'); overflow:hidden;}
.solution:before{position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; content:''; background:rgba(0,0,0,0.8);}
.solution article{position:relative; z-index:8;}
.solution .title{position:relative; z-index:9;}
.solution .title b{color:rgb(255,255,255);}
.solution .title p{color:rgb(255,255,255); -webkit-text-fill-color:rgb(255,255,255); background-image:none;}
.solution .title + .list{padding-top:38px;}
.solution .text{text-align:center; margin-top:18px; position:relative; z-index:8;}
.solution .text:before{width:68px; height:4px; border-radius:3px; margin:0 auto; display:block; content:''; background:rgb(17,121,215);}
.solution .text>ol{margin:28px 0 18px 0;}
.solution .text>ol>li{display:none; font-size:18px; height:95px;}
.solution .text>ol>li.on{display:block;}
.solution .text>ol>li>em{color:rgb(188,188,188); padding:0 8px;}
.solution .text>ol>li>span{color:rgb(188,188,188);}
.solution .list{text-align:center; position:relative; z-index:6;}
.solution .list>ul{ }
.solution .list>ul:after{display:block; content:''; clear:both;}
.solution .list>ul>li{float:left; width:16.66666%; width:20%; padding:28px; position:relative;}
.solution .list>ul>li:before{background:rgba(0,0,0,.48); border:1px solid rgba(0,0,0,.48); content:''; transform:scaleX(1.1);
position:absolute; left:0; right:0; top:-999px; height:1999px; visibility:hidden; opacity:0; transition:.3s;}
.solution .list>ul>li:hover:before{visibility:visible; opacity:1; border-color:rgba(255,255,255,.48); transform:scaleX(1);}
.solution .list>ul>li span{display:inline-block; position:relative; z-index:9;}
.solution .list>ul>li ins{display:block; transform:translateY(28px); transition:.3s;}
.solution .list>ul>li ins>img:first-child{display:block; border-radius:3px;}
.solution .list>ul>li ins>img:last-child{display:none; border-radius:3px;}
.solution .list>ul>li h3{display:block; margin-top:8px; transform:translateY(28px); transition:.3s;}
.solution .list>ul>li h3 a{color:rgb(255,255,255);}
.solution .list>ul>li p{margin:38px 0; font-size:18px; color:rgb(188,188,188);  
transform:translateY(-18px); visibility:hidden; opacity:0; transition:.3s;}
.solution .list>ul>li a.more{padding:4px 18px; display:inline-block; border-radius:18px; color:rgb(255,255,255);
transform:translateY(-48px); visibility:hidden; opacity:0; transition:.3s;
background:rgb(17,121,215); border:1px solid rgb(17,121,215);}
.solution .list>ul>li a.more>b{transition:.2s; font-weight:normal; display:inline-block;}
.solution .list>ul>li a.more>i{transition:.2s;}
.solution .list>ul>li a.more:hover{background:none; color:rgb(17,121,215);}
.solution .list>ul>li a.more:hover>b{transform:translateX(-3px);}
.solution .list>ul>li a.more:hover>i{transform:translateX(2px);}
.solution .list>ul>li:hover ins{transform:translateY(0);}
.solution .list>ul>li:hover ins>img:first-child{display:none;}
.solution .list>ul>li:hover ins>img:last-child{display:block;}
.solution .list>ul>li:hover h3{transform:translateY(0);}
.solution .list>ul>li:hover p{transform:translateY(0); visibility:visible; opacity:1;}
.solution .list>ul>li:hover a.more{transform:translateY(0); visibility:visible; opacity:1;}
@media(max-width:1440px){
.solution .text>ol>li{font-size:16px; height:84px;}
.solution .list>ul>li p{font-size:16px;}
}
@media(max-width:1199px){
.solution{padding:38px 0;}
.solution .title + .list{padding-top:28px;}
.solution .text>ol{margin:18px 0;}
.solution .text>ol>li{height:auto;}
.solution .list>ul{margin:0 -8px;}
.solution .list>ul>li{padding:8px;}
.solution .list>ul>li:before{display:none;}
.solution .list>ul>li p{display:none;}
.solution .list>ul>li a.more{display:none;}
.solution .list>ul>li ins{transform:translateY(0);}
.solution .list>ul>li h3{transform:translateY(0);}
}
@media(max-width:991px){
.solution .list>ul>li{width:33.333333333333%;}
}
@media(max-width:767px){
.solution{padding:18px 0;}
.solution .title + .list{padding-top:18px;}
.solution .text>ol>li{font-size:14px;}
.solution .list>ul{margin:0;}
.solution .list>ul>li{width:50%; padding:8px;}
.solution .list>ul>li h3{margin-top:4px; font-size:14px;}
}


.product{padding:58px 0; text-align:center; background:rgb(248,248,248);}
.product .title + .list{padding-top:38px;}
.product .list ul{margin:-18px;}
.product .list ul:after{display:block; content:''; clear:both;}
.product .list ul li{padding:18px; width:33.333%; float:left;}
.product .list ul li div{padding:8px; border-radius:3px; background:rgb(255,255,255); transition:.3s;}
.product .list ul li:hover div{box-shadow:0 0 18px rgba(0,0,0,.08);}
.product .list ul li a.img{display:block; overflow:hidden; border-radius:3px;}
.product .list ul li a.img img{display:block; width:100%; transition:.3s;}
.product .list ul li a.img:hover img{transform:scale(1.18);} 
.product .list ul li span.txt{display:block; padding:18px 0; margin:0 8px; border-bottom:1px dashed #888;}
.product .list ul li span.txt h3{font-size:18px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.product .list ul li span.txt p{margin-top:4px; font-size:16px; color:rgb(153,153,153); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.product .list ul li span.txt i{display:block; font-size:18px; margin-top:4px; font-style:normal; color:red;}
.product .list ul li span.btn{display:block; padding:18px 0 8px 0;}
.product .list ul li span.btn a{display:inline-block; border:1px solid #f0f0f0; padding:4px 28px; border-radius:50px;}
.product .list ul li span.btn a b{display:inline-block; font-weight:normal; transition:.3s;}
.product .list ul li span.btn a i{transition:.3s;}
.product .list ul li span.btn a:hover{background:rgb(17,121,215); border:1px solid rgb(17,121,215);}
.product .list ul li span.btn a:hover b{transform:translateX(-4px); color:#fff;}
.product .list ul li span.btn a:hover i{transform:translateX(2px); color:#fff;}
.product .more{text-align:center; margin-top:28px;}
@media(max-width:1199px){
.product{padding:38px 0;}
.product .title + .list{padding-top:28px;}
.product .list ul{margin:-8px;}
.product .list ul li{padding:8px;}
}
@media(max-width:991px){
.product .list>ul>li{width:50%;}
}
@media(max-width:767px){
.product{padding:18px 0;}
.product .title + .list{padding-top:18px;}
.product .list ul{margin:-4px;}
.product .list ul li{padding:4px; width:50%;}
.product .list ul li div{padding:4px;}
.product .list ul li a h4{padding:4px;}
.product .list ul li span.txt{padding:4px 0; margin:0 4px;}
.product .list ul li span.txt h3{font-size:16px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.product .list ul li span.txt p{margin-top:0; font-size:14px;}
.product .list ul li span.txt i{font-size:16px; margin-top:0;}
.product .list ul li span.btn{padding:8px 0 4px 0;}
.product .list ul li span.btn a{padding:2px 18px;}
.product .more{margin-top:16px;}
}

.news{padding:58px 0; background-size:cover; background-position:center; background-color:; background-image:url('');}
.news .title + .list{padding-top:28px;}
.news .list>ul{margin:0 -28px;}
.news .list>ul:after{display:block; content:''; clear:both;}
.news .list ul li{width:50%; padding:18px 28px; float:left;}
.news .list ul li dl{position:relative; background:rgb(244,246,248); overflow:hidden; border-radius:3px;}
.news .list ul li dt{position:absolute; width:32%; height:100%; left:0; top:0;}
.news .list ul li dt a{display:block; width:100%; height:100%; overflow:hidden; transition:.3s;}
.news .list ul li dt a img{display:block; width:100%; height:100%; object-fit:cover; transition:.3s;}
.news .list ul li dt a:hover img{transform:scale(1.04);} 
.news .list ul li dd{margin-left:32%; width:68%; padding:28px;}
.news .list ul li dd b{display:block; font-weight:normal; font-size:18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.news .list ul li dd p{overflow:hidden; color:rgb(102,102,102); height:49px; margin:8px 0 18px 0;}
.news .list ul li dd i{display:block; color:rgb(102,102,102); font-style:normal;}
.news .more{text-align:center; margin-top:28px;}
@media(max-width:1199px){
.news{padding:38px 0;}
.news .list>ul{margin:0 -8px;}
.news .list ul li{padding:8px;}
.news .list ul li dd{padding:18px;}
.news .list ul li dd b{font-size:16px;}
.news .list ul li dd p{margin:4px 0 8px 0;}
}
@media(max-width:991px){
.news .list ul li{width:100%;} 
}
@media(max-width:767px){
.news{padding:18px 0;}
.news .title + .list{padding-top:16px;}
.news .list>ul{margin:0 -4px;}
.news .list ul li{padding:4px;}
.news .list ul li dd{padding:8px;}
.news .list ul li dd p{margin:0 0 4px 0; height:25px;}
.news .more{margin-top:16px;}
}